{% extends 'steed_admin/navbar_demo.html' %}

{% block title %}
    <title>数据表管理</title>
{% endblock %}

{% load tags %}
{% block main %}
    <div class="panel panel-primary">
        {% get_meta admin_obj.model as meta %}
        <div class="panel-heading">
            <h3 class="panel-title">
                <a href="{% url 'steed_admin:app_index' %}">
                    <span class="glyphicon glyphicon-home" aria-hidden="true"></span> 首页
                </a>
                | {{ meta.verbose_name_plural }}
                <a href="{% url 'steed_admin:table_add' meta.app_label meta.model_name %}" class="pull-right">
                    <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> 添加记录
                </a>
            </h3>
        </div>
        {% if admin_obj.filter or admin_obj.search_fields or admin_obj.actions %}
        <!-- 下面是面板的body，可以没有 -->
        <div class="panel-body">
        {# 过滤 #}
        {% if admin_obj.list_filter %}
        <div class="row">
            {% for field_name in admin_obj.list_filter %}
                <div class="col-lg-2">
{#                    <label class="control-label">{{ field_name }}</label>#}
                    <label class="control-label">{{ field_name|get_filed_verbose:meta }}</label>
                    {% get_filter_field field_name admin_obj request.GET %}
                </div>
            {% endfor %}
        </div>
        {% if admin_obj.search_fields or admin_obj.actions %}<br />{% endif %}
        {% endif %}
        {# 搜索 #}
        {% if admin_obj.search_fields %}
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control search-fields"
                           placeholder="字段：{{ admin_obj.search_fields|join:', ' }}"
                           value="{{ request.GET.search }}" />
                    <span class="input-group-btn">
                        <button class="btn btn-primary search-fields" type="button">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 搜索
                        </button>
                    </span>
                </div>
            </div>
        </div>
        {% if admin_obj.actions %}<br />{% endif %}
        {% endif %}
        {# 执行动作 #}
        {% if admin_obj.actions %}
        <form class="form-inline" method="post">
        {% csrf_token %}
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon"><label for="action">动作</label></div>
{#                    <select required class="form-control" name="action" id="action">#}
                    <select required class="form-control" name="action" id="action">
                        <option selected value="">---------</option>
                        {% for action in admin_obj.actions %}
                            <option value="{{ action }}">
                                {{ admin_obj|get_attr:action|get_attr:'short_description' }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div hidden=""></div>
            </div>
            <button class="btn btn-primary" type="submit">
                <span class="glyphicon glyphicon-play" aria-hidden="true"></span> 执行
            </button>
            {% if action_msg %}
                <span id="action-msg" class="{{ action_msg.0 }}"> {{ action_msg.1 }}</span>
            {% else %}
                <span id="action-msg" class="text-warning"></span>
            {% endif %}
        </form>
        {% endif %}
        </div>
        {% endif %}
        <!-- 下面是表格 -->
        <table class="table">
            <thead>
            <tr>
                {% if admin_obj.actions %}<th><input type="checkbox" title="全选"></th>{% endif %}
                {% if admin_obj.list_display %}
                    {% render_th_eles admin_obj request.GET %}
                {% else %}
                    <th>{{ meta.verbose_name }}</th>
                {% endif %}
            </tr>
            </thead>
            <tbody>
            {% for obj in objs %}
            <tr>
                {% if admin_obj.actions %}<td><input type="checkbox" value="{{ obj.id }}"></td>{% endif %}
                {% if admin_obj.list_display %}
                    {% render_td_eles obj admin_obj request.path %}
                {% else %}
{#                    <td><a href="{{ request.path }}{{ obj.id }}/change/">{% print_str obj %}</a></td>#}
                    <td><a href="{{ request.path }}{{ obj.id }}/change/">{{ obj }}</a></td>
                {% endif %}
            </tr>
            {% endfor %}
            </tbody>
        </table>
        <p class="text-info">&emsp;总共{{ objs.paginator.count }}条记录</p>

    <!-- 分页+翻页 -->
    <nav aria-label="Page navigation" id="page-navigation">
        <ul class="pagination">
            <li>
                <a href="{% href_change 'page' '1' request.GET %}#page-navigation" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            {% if objs.has_previous %}
                <li><a href="{% href_change 'page' objs.previous_page_number request.GET %}#page-navigation">上一页</a></li>
            {% else %}
                <li class="disabled"><a href="#page-navigation">上一页</a></li>
            {% endif %}
            {% render_page_eles objs 5 request.GET %}
            {% if objs.has_next %}
                <li><a href="{% href_change 'page' objs.next_page_number request.GET %}#page-navigation">下一页</a></li>
            {% else %}
                <li class="disabled"><a href="#page-navigation">下一页</a></li>
            {% endif %}
            <li>
                <a href="{% href_change 'page' objs.paginator.num_pages request.GET %}#page-navigation" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

    </div>
{% endblock %}

{% block js %}
    <script>
    $(function () {
        // 搜索功能提交
        $('button.search-fields').click(function () {
            var searchURL = window.location.search;
            searchURL = searchURL.substring(1, searchURL.length);
            searchURL = searchURL.split("&");
            var params = {};
            for(var i=0; i<searchURL.length; i++){
                params[searchURL[i].split("=")[0]] = searchURL[i].split("=")[1];
            }
            params['search'] = $('input.search-fields').val();
            window.location.href = '?' + $.param(params)
        });
        // 给input框绑定回车
        $('input.search-fields').keydown(function (ev) {
            if(ev.keyCode === 13){
                $('button.search-fields').click()
            }
        });
        {# 只有显示list_display的时候需要绑定下面的事件 #}
        {# 点击效果必须在js里绑定事件，直接写在标签里，测试的时候无法阻止事件冒泡 #}
        {# 如果不想用js实现，也可以在th标签里写div加上a标签，django是这么做的 #}
        {# 用了a标签还是否会有事件冒泡的问题没测试过 #}
        {# 字段名写在a标签里，a标签要设置为display:block，把整个th填满。这个也需要自己添加额外的css属性 #}
        {% if admin_obj.list_display %}
        // 给th标签，以及里面的图标绑定事件
        $('th[href]').click(function () {
            location = $(this).attr('href');
        });
        $('button.btn[href]').click(function () {
            location = $(this).attr('href');
            return false
        });
        {% endif %}
        {% if admin_obj.actions %}
        var check_ele = $('table.table tbody tr>td:first-child>:checkbox');  // 表格每行开头的复选框，这个会多次用到
        // 表格第一列的复选框，绑定事件后，顺便把父级th的宽度也设置一下
        $('table.table thead tr>th:first>:checkbox').change(function () {
            check_ele.prop("checked", $(this).prop("checked"))
        }).parent().css('width', 30);
        // 提交表单前绑定操作
        $('#action').parents("form").on('submit', function (event) {
            // 把被选中的复选框复制一份，加上name属性，追加到隐藏的div中。追加前先清空div。
            // 验证长度不能为0，就是要选中至少1条，否则return false，会阻止submit提交
            return (check_ele.filter(':checked').clone().attr('name', 'select_ids').appendTo(
                $(this).find('div:hidden').empty()).length !== 0);
        });
        {% endif %}
    });
    </script>
{% endblock %}

